<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>分页插件demo</title>
    <link rel="stylesheet" href="style/pagination.css"/>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #list {
            width: 1000px;
            margin: 10px auto;
        }

        #list ul {
            list-style: none;
        }

        #list ul li {
            width: 240px;
            height: 190px;
            margin-left: 8px;
            margin-top: 25px;
            margin-bottom: 5px;
            position: relative;
            float: left;
        }

        #list ul li div.img {
            padding: 4px;
            border-radius: 10px;
            box-shadow: 0 0 5px #cdcdcd;
            border: 1px solid #cdcdcd;
            margin-top: 10px;
        }

        #list ul li div img {
            width: 230px;
            height: 180px;
        }

        #list ul li div.detail {
            margin: 5px;
            color: #559999;
            float: left;
            width: 240px;
        }

        #list ul li span.price {
            float: right;
            color: #cc0033;;
            margin-right: 8px;
        }

        #setPageDiv {
            clear: left;
            width: 1000px;
            margin: 10px auto;
        }

        .shopping {
            position: fixed;
            height: 50px;
            width: 200px;
            right: 0px;
            top: 15px;
        }

        .shopping-buy-btn {
            border: 1px dotted #cdcdcd;
            background-color: #cdcdcd;
            color: #cc0033;
            font-size: small;
            border-radius: 3px;
            box-shadow: 0 0 5px #cdcdcd;

        }

        .shopping span.showNum {
            position: absolute;
            left: 8px;
            top: -8px;
            background-color: #f69;
            color: #FFFFFF;
            font-size: large;
            width: 20px;
            height: 15px;
            border-radius: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="setPageDiv">
    <select id="setPage">
        <option value="4">四条数据</option>
        <option value="8">八条数据</option>
        <option value="12">十二条数据</option>
    </select>
    <div id="Pagination" class="box"></div>
</div>
<div id="list">
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.pagination.js"></script>
<script>

    // 准备数据：list.json是一个静态资源，所以可以作为静态资源正常请求
    // 开启服务器：app.js
    // 数据先从后端请求：jq-ajax
    // 分页显示数据：利用分页插件渲染页面


    class Page{
        constructor(ops){
            this.box = ops.box;
            this.list = ops.list;
            this.url = ops.url;
            this.num = ops.num || 4;
            this.index = ops.index || 0;
            // 1. 请求数据
            this.load();
        }
        load(){
            $.ajax({
                url:this.url,
                success:res=>{
                    // console.log(res)
                    this.res = res;
                    // 2. 渲染页码
                    this.renderPage();
                }
            })
        }
        renderPage(){
            this.box.pagination(this.res.length, {
                items_per_page: this.num,
                current_page: this.index,
                callback:(i)=>{
                    this.index = i;
                    // 3. 渲染页面
                    this.render()
                }
            })
        }
        render(){
            // console.log(this.res , this.index);

            // 0: 0~4       num*index ~ num*index+num
            // 1: 4~8       num*index ~ num*index+num
            // 2: 8~12      num*index ~ num*index+num
            // 3: 12~16      num*index ~ num*index+num
            // 4: 16~20      num*index ~ num*index+num
            // 5: 20~24      num*index ~ num*index+num
            // 6: 24~28      num*index ~ num*index+num

            let str = "";
            for(var i=this.index*this.num;i<this.index*this.num+this.num;i++){
                if(i<this.res.length){
                    str += `<li>
                            <div class="img">
                                <img src="${this.res[i].img}">
                            </div>
                            <div class="detail">
                                ${this.res[i].info}
                                <span class="price">特价$${this.res[i].price}</span>
                            </div>
                        </li>`;
                }
            }
            this.list.html(str);
        }
    }
    

    new Page({
        box:$(".box"),
        list:$(".list").children("ul"),
        url:"http://localhost:3000/project/data/list.json",
        num:4,
        index:0
    })


</script>
</body>
</html>
